<template>
    <button @click="addTalk">获取</button>

    <ul>
        <li v-for="talk in loveTalk" :key="talk.id">{{ talk.title }} </li>

    </ul>
    <hr>
    <h2>pinia修改</h2>
    <button @click="storeaddTalk">store获取</button>
    <ul>
        <!-- <li v-for="talk in loveTalk" :key="talk.id">{{ talk.title }} </li> -->
        <li v-for="talk in storeloveTalk" :key="talk.id">{{ talk.title }} </li>
    </ul>


</template>

<script lang='ts' setup>
import axios from 'axios';
import { reactive } from 'vue'
import { nanoid } from "nanoid"
import { useTalkStore } from "@/store/talk"
import { storeToRefs } from 'pinia';
let talkStore = useTalkStore()
let { storeloveTalk } = storeToRefs(talkStore)

const loveTalk = reactive(
    [
        { id: 'ftrfasdfo1', title: "今天你有点怪，哪里怪?怪好看的!" },
        { id: 'ftrfasdf02', title: "草莓、蓝莓、蔓越莓，今天想我了没?" },
        { id: 'ftrfasdfe3', title: 'hahahahahaha' }
    ])
const addTalk = async () => {
    let { data: { content } } = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")
    loveTalk.push({ id: nanoid(), title: content })

}
const storeaddTalk = () => {
    talkStore.inscrement()
}
</script>
<style lang='scss' scoped></style>